// 弹窗
<template>
    <teleport to="body">
        <!-- 一网通 -->
        <div v-if="modalOpen&&popType==1" class="modal">
            <div class="container">
                <div class="header">
                    <div class="title">{{title}}</div>
                    <div class="close" @click="closePop()"></div>
                </div>
                <div class="content">
                    <div v-for="row in list">
                        <div class="title" :title="row.regionName">{{row.regionName}}</div>
                        <div class="item-content">
                            <span><strong>{{row.value}}</strong><em>{{row.unit}}</em></span>
                        </div>
                    </div>
                    <div class="loading" v-show="reqStatus=='loading'">
                        <img src="../assets/loading.gif" />
                        <span>拼命加载中</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 12345案件 -->
        <div v-if="modalOpen&&popType==2" class="modal">
            <div class="container">
                <div class="header">
                    <div class="title">{{title}}</div>
                    <div class="close" @click="closePop()"></div>
                </div>
                <div class="content">
                    <div v-for="row in list">
                        <div class="title" v-if="row.dayNum!=undefined" :title="row.address">{{row.address}}</div>
                        <div class="title" v-else title="{{row.regionName}}">{{row.regionName}}</div>

                        <div class="item-content" v-if="row.dayNum!=undefined">
                            <span>{{label1}}:&nbsp;<strong>{{row.dayNum}}</strong><em>{{row.dayUnit}}</em></span>
                            <span>{{label2}}:&nbsp;<strong>{{row.weekNum}}</strong><em>{{row.weekUnit}}</em></span>
                        </div>
                        <div class="item-content" v-else>
                            <span>安装:&nbsp;<strong>{{row.installNum}}</strong><em>{{row.installUnit}}</em></span>
                            <span>告警:&nbsp;<strong style="color:red">{{row.alarmNum}}</strong><em>{{row.alarmUnit}}</em></span>
                        </div>
                    </div>
                    <div class="loading" v-show="reqStatus=='loading'">
                        <img src="../assets/loading.gif" />
                        <span>拼命加载中</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 列表 -->
        <div v-if="modalOpen&&popType==3" class="modal">
            <div class="list_container">
                <div class="header">
                    <div class="title">{{title}}</div>
                    <div class="close" @click="closePop()"></div>
                </div>
                <div class="toolbar">
                    <ul>
                        <li :class="{active:isInstallActive}" @click="toggleHandler('install')">安装列表</li>
                        <li v-if="showTab">|</li>
                        <li v-if="showTab" :class="{active:isWarningActive}" @click="toggleHandler('warning')">告警列表</li>
                    </ul>
                    <input v-show="isInstallActive" type="text" placeholder="请输入地址" v-model="installAddressBind" />
                    <div v-show="isInstallActive" class="search" @click="installSearch"></div>
                    <input v-show="isWarningActive" type="text" placeholder="请输入地址" v-model="warningAddressBind" />
                    <div v-show="isWarningActive" class="search" @click="warningSearch"></div>
                </div>
                <table v-show="isInstallActive">
                    <thead>
                        <tr>
                            <th style="width:258px;">编号</th>
                            <!-- <th>设备类型</th> -->
                            <th style="width:auto">地址</th>
                            <th style="width:125px">街镇</th>
                            <th style="width:60px">状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in installList">
                            <td :title="row.sensorId" class="hiddenFont">{{row.sensorId}}</td>
                            <!-- <td>{{row.name}}</td> -->
                            <td :title="row.address" class="hiddenFont">{{filterStr(row.address)}}</td>
                            <td class="hiddenFont">{{filterStr(row.regionName)}}</td>
                            <td class="hiddenFont" :style="{color:calcColor(row.status)}">{{row.status}}</td>
                        </tr>
                    </tbody>
                </table>
                <el-pagination v-show="isInstallActive&&installList.length>0" :small='true' :background='true' @current-change="installPageEvent" :current-page="installPageIndex" :page-size="6" layout="total, prev, pager, next, jumper" :total="installTotal">
                </el-pagination>
                <div class="no_data" v-show="isInstallActive&&installReqStatus=='empty'"></div>
                <div class="loading" v-show="isInstallActive&&installReqStatus=='loading'">
                    <img src="../assets/loading.gif" />
                    <span>拼命加载中</span>
                </div>
                <table v-show="isWarningActive">
                    <thead>
                        <tr>
                            <th style="width:173px">编号</th>
                            <!-- <th>设备类型</th> -->
                            <th style="width:206px">事件名称</th>
                            <th style="width:auto">地址</th>
                            <th style="width:96px">街镇</th>
                            <th style="width:147px">告警时间</th>
                            <th style="width:64px">处置状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in warningList">
                            <td class="hiddenFont" :title="row.sensorId">{{row.sensorId}}</td>
                            <!-- <td>{{row.name}}</td> -->
                            <td :title="row.eventName" class="hiddenFont">{{row.eventName}}</td>
                            <td class="hiddenFont" :title="row.address">{{filterStr(row.address)}}</td>
                            <td class="hiddenFont" :title="row.regionName">{{filterStr(row.regionName)}}</td>
                            <td>{{row.generateTime}}</td>
                            <td :style="{color:calcColor(row.status)}" style="text-align:center">{{row.status}}</td>
                        </tr>
                    </tbody>
                </table>
                <el-pagination v-show="isWarningActive&&warningList.length>0" :small='true' :background='true' @current-change="warningPageEvent" :current-page="warningPageIndex" :page-size="6" layout="total, prev, pager, next, jumper" :total="warningTotal">
                </el-pagination>
                <div class="no_data" v-show="isWarningActive&&warningReqStatus=='empty'"></div>
                <div class="loading" v-show="isWarningActive&&warningReqStatus=='loading'">
                    <img src="../assets/loading.gif" />
                    <span>拼命加载中</span>
                </div>
            </div>
        </div>
    </teleport>
</template>

<script lang="ts">
import { debug } from 'console'
import { defineComponent, ref, inject, Ref, computed } from 'vue'

export default defineComponent({
    name: 'pop',
    props: {
        list: {
            type: Array,
            required: true,
        },
        installList: {
            type: Array,
            required: true,
        },
        installTotal: {
            type: Number,
            required: true,
        },
        warningList: {
            type: Array,
            required: true,
        },
        warningTotal: {
            type: Number,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
        installPageIndex: {
            type: Number,
            required: true,
        },
        warningPageIndex: {
            type: Number,
            required: true,
        },
        installAddress: {
            type: String,
            required: true,
        },
        warningAddress: {
            type: String,
            required: true,
        },
        installPageEvent: {
            type: Function,
            required: true,
        },
        warningPageEvent: {
            type: Function,
            required: true,
        },
        updateInstallAddress: {
            type: Function,
            required: true,
        },
        installSearch: {
            type: Function,
            required: true,
        },
        updateWarningAddress: {
            type: Function,
            required: true,
        },
        warningSearch: {
            type: Function,
            required: true,
        },
        showTab: {
            type: Boolean,
            default: true,
        },
        label1: {
            type: String,
            default: '今日',
        },
        label2: {
            type: String,
            default: '本周',
        },
        reqStatus: {
            type: String,
            required: true,
        },
        installReqStatus: {
            type: String,
            required: true,
        },
        warningReqStatus: {
            type: String,
            required: true,
        },
    },
    setup(props) {
        function closePop() {
            modalOpen.value = false
            isInstallActive.value = true
            isWarningActive.value = false
        }

        // 注入
        let modalOpen = inject('modalOpen')
        let popType = inject('popType')

        // 切换tab
        const isInstallActive = ref(true)
        const isWarningActive = ref(false)
        const toggleHandler = (flag: string) => {
            isInstallActive.value = false
            isWarningActive.value = false
            if (flag == 'install') {
                isInstallActive.value = true
            } else if (flag == 'warning') {
                isWarningActive.value = true
            }
        }

        // 计算属性绑定
        const installAddressBind = computed({
            get() {
                return props.installAddress
            },
            set(val) {
                props.updateInstallAddress(val)
            },
        })

        // 计算属性绑定
        const warningAddressBind = computed({
            get() {
                return props.warningAddress
            },
            set(val) {
                props.updateWarningAddress(val)
            },
        })

        // 根据文字计算颜色
        const calcColor = (status) => {
            if (['正常', '已处置'].includes(status)) {
                return 'rgb(0, 255, 54)'
            } else if (['告警', '待处置'].includes(status)) {
                return 'red'
            } else if (['处置中'].includes(status)) {
                return 'gold'
            }
        }

        // 过滤为空的返回值
        const filterStr = (str: string) => {
            if (
                str === undefined ||
                str === null ||
                str === 'null' ||
                str === ''
            ) {
                return '--'
            } else {
                return str
            }
        }

        return {
            modalOpen,
            popType,
            closePop,
            isInstallActive,
            isWarningActive,
            toggleHandler,
            installAddressBind,
            warningAddressBind,
            calcColor,
            filterStr,
        }
    },
})
</script>

<style scoped lang="scss">
.modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
}
.container {
    position: absolute;
    left: 23px;
    top: 98px;
    background-color: white;
    width: 967px;
    height: 340px;
    background-image: url('../assets/bg_s.png');
    // overflow-x: hidden;

    .header {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        .title {
            font-size: 18px;
            font-family: FZZongYi-M05S, FZZongYi-M05S-Regular;
            font-weight: 400;
            text-align: left;
            color: #ffffff;
            letter-spacing: 1px;
        }
        .title::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            padding: 2px;
            border: 2px solid #00f6ff;
            border-radius: 100%;
            background-clip: content-box;
            background-color: #00f6ff;
            margin: auto 8px auto 15px;
        }
        .close {
            width: 21px;
            height: 21px;
            background-image: url('../assets/close.png');
            background-size: cover;
            margin-right: 15px;
            cursor: pointer;
        }
    }

    .content {
        position: relative;
        display: grid;
        // grid-template-columns: 220px 220px 220px 220px;
        grid-template-columns: repeat(auto-fill, 220px);
        grid-auto-rows: 81px;
        row-gap: 9px;
        column-gap: 10px;
        justify-content: center;
        margin: 15px auto 0;
        // padding-bottom: 15px;
        height: 268px;
        overflow-x: hidden;
        width: 929px;

        &::-webkit-scrollbar {
            width: 5px;
            height: 20px;
            background-color: #07304a;
        }

        &::-webkit-scrollbar-thumb {
            width: 5px;
            height: 20px;
            border-radius: 3px;
            background-color: #093f62;
        }

        > div {
            background-color: rgba(52, 53, 105, 0.54);

            .title {
                font-size: 18px;
                font-weight: 500;
                color: #ffffff;
                letter-spacing: 1px;
                text-align: center;
                line-height: 41px;
                letter-spacing: 1px;

                display: -webkit-box;
                text-overflow: ellipsis; //省略号
                overflow: hidden;
                width: 100%;
                -webkit-line-clamp: 1; //从第二行开始隐藏
                -webkit-box-orient: vertical;
            }

            .item-content {
                display: flex;
                justify-content: space-around;
                align-items: center;
                align-content: center;
                font-size: 16px;
                font-weight: 400;
                span {
                    display: flex;
                    justify-content: baseline;
                    align-items: baseline;
                }

                strong {
                    font-size: 20px;
                    font-family: DIN Condensed, DIN Condensed-Bold;
                    font-weight: 700;
                    color: #11d8fc;
                }
                em {
                    font-size: 14px;
                    font-weight: 500;
                    color: #11d8fc;
                    font-style: normal;
                    letter-spacing: 1px;
                }
            }
        }
    }
}
.list_container {
    position: absolute;
    left: 23px;
    top: 98px;
    background-color: white;
    width: 967px;
    height: 438px;
    background-image: url('../assets/bg.png');
    overflow-x: hidden;

    .header {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        .title {
            font-size: 18px;
            font-family: FZZongYi-M05S, FZZongYi-M05S-Regular;
            font-weight: 400;
            text-align: left;
            color: #ffffff;
            letter-spacing: 1px;
        }
        .title::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            padding: 2px;
            border: 2px solid #00f6ff;
            border-radius: 100%;
            background-clip: content-box;
            background-color: #00f6ff;
            margin: auto 8px auto 15px;
        }
        .close {
            width: 21px;
            height: 21px;
            background-image: url('../assets/close.png');
            background-size: cover;
            margin-right: 15px;
            cursor: pointer;
        }
    }
    .toolbar {
        position: relative;
        margin: 25px 15px 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > ul {
            list-style: none;
            padding: 0;
            margin: 0;
            color: #00eff9;
            letter-spacing: 1px;

            li {
                display: inline;
                opacity: 0.5;
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
            }
            li:not(:first-child)::before {
                content: '';
                // display: inline-block;
                // opacity: 0.7;
                margin: 0 7px;
                padding: 0;
                vertical-align: baseline;
                color: #ffffff;
            }
            .active {
                opacity: 1;
                font-size: 18px;
                font-weight: 700;
                cursor: auto;
            }
        }

        > input {
            width: 148px;
            height: 24px;
            opacity: 1;
            border: 1px solid #ffffff;
            border-radius: 6px;
            padding: 0 10px;
            outline: none;
            background: transparent;
            color: rgb(255, 255, 255);
        }
        .search {
            width: 15px;
            height: 15px;
            top: 6px;
            right: 6px;
            position: absolute;
            cursor: pointer;
            background: url('../assets/search.png') no-repeat;
            background-size: cover;
        }
    }
    > table {
        width: calc(100% - 30px);
        margin: 15px auto;
        border-spacing: 0;
        table-layout: fixed;
        th {
            font-size: 16px;
            font-weight: 600;
            color: #11d8fc;
            height: 37px;
            text-align: left;
            padding: 0 10px;
            background: rgba(52, 53, 105, 0.54) !important;
        }
        tr {
            height: 37px;
        }
        td {
            text-align: left;
            white-space: nowrap;
            padding: 0 10px;
            // padding-left: 15px;
        }
        th,
        tr:nth-child(even) {
            background: rgba(52, 53, 105, 0.32);
        }
        .hiddenFont {
            overflow: hidden;
            text-overflow: ellipsis; //省略号
        }
    }

    .no_data {
        position: absolute;
        width: 152px;
        height: 134px;
        background: url('../assets/no_data.png') no-repeat;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -25%);
    }
    .loading {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -25%);
        img {
            width: 50px;
            height: 50px;
        }
        span {
            margin-top: 15px;
            font-size: 16px;
            color: #00eff9;
        }
    }
}

.loading {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -25%);
    background-color: transparent !important;
    img {
        width: 50px;
        height: 50px;
    }
    span {
        margin-top: 15px;
        font-size: 16px;
        color: #00eff9;
    }
}
</style>